<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup>
import Footertab from '@/components/footerTab.vue'
import Toptab from '@/components/topTab.vue'
import { ref, onMounted } from 'vue'
import { rankList } from '@/api/home'
import { rankListStore } from '@/stores/manage.js'
const ranks = ref([])
const rankStore = rankListStore()
onMounted(async () => {
  const res = await rankList()
  ranks.value = res.data.data
  let rankIds = ranks.value.map(item => item.comic_id)
  rankStore.setRanks(rankIds)
  console.log(ranks.value)
})

const items = ref({
  styles: [
    { id: 1, name: '都市', color: '#ff0000' },
    { id: 2, name: '西幻', color: '#00ff00' },
    { id: 3, name: '古风', color: '#ff00ff' },
    { id: 4, name: '游戏竞技', color: '#b15bff' },
    { id: 5, name: '悬疑灵异', color: '#E9D26C' },
    { id: 6, name: '奇幻', color: '#AA73F1' },
    { id: 7, name: '现代', color: '#37DADA' },
    { id: 8, name: '玄幻', color: '#CC6CE7' },
    { id: 9, name: '青春', color: '#ffa500' },
    { id: 10, name: '武侠仙侠', color: '#EFC3CA' },
    { id: 11, name: '热血', color: '#3366ff' },
    { id: 12, name: '科幻', color: '#5f9ea0' },
  ],
})
</script>

<template>
  <!-- 顶部标签 -->
  <Toptab />
  <div class="number">
    <img src="../assets/images/one.svg" alt="" />
    <img src="../assets/images/two.svg" alt="" />
    <img src="../assets/images/three.svg" alt="" />
  </div>
  <div class="all">
    <div class="rank" v-for="item in ranks" :key="item.comic_id">
      <div class="image">
        <img :src="item.vertical_cover" alt="" />
      </div>
      <div class="content">
        <div class="title">{{ item.title }}</div>
        <p class="author">{{ item.author[0] }}</p>
        <van-tag
          :color="items.styles.find((s) => s.name === item.styles[0].name)?.color"
          class="tag"
          >{{ item.styles[0].name }}</van-tag
        >
        <!-- <p class="author">更新至{{ item.last_ord }}章|共{{ item.total }}章</p> -->
        <!-- 四、动态绑定渲染 -->
        <p v-if="item.last_short_title == item.total">
          <span>已完结 | 共{{ item.total }}章</span>
        </p>
        <p v-else>
          <span>更新至{{ item.last_short_title }}章 | 共{{ item.total }}章</span>
        </p>
      </div>
    </div>
  </div>
  <!-- 底部标签 -->
  <Footertab />
</template>

<!-- scope：指当前的样式仅在此页面作用 -->
<style lang="less" scoped>
.number {
  width: 35px;
  margin-left: 8px;
  position: absolute;
  img {
    margin-bottom: 95px;
  }
}
.all {
  margin-top: 80px;
  margin-left: 25px;
}
.rank {
  display: flex;
  margin-bottom: 10px;
}
.image {
  width: 110px;
  height: 150px;
  margin-right: 10px;
  img {
    width: 100%;
    height: 100%;
  }
}

.content {
  .title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 45px;
  }
  .tag {
    display: inline-block;
    color: white;
    background-color: skyblue;
    font-size: 14px;
    border-radius: 5px;
    padding: 2px;
    margin: 3px;
  }
  .author {
    color: gray;
    font-size: 14px;
  }
}
p {
  margin: 0;
}

span {
  color: gray;
  font-size: 14px;
}
</style>
